<template>
	<view class="height-100 overflow-hidden bg-gray">
		<view class="position-fixed-top" style="z-index: 99;" v-if="isServiceList">
			<!-- 分类 -->
			<view class="flex-direction-row justify-around padding-lr padding-tb-xs bg-white">
				<block v-for='(item,index) in typeArray' :key='index'>
					<text class="text-df padding-tb-xsm borderBottomWhite" :class="{'select-on color-df':type==index}"
						@click="typeChange(index)">{{item}}</text>
				</block>
			</view>
		</view>
		<view style="height: 90rpx;" v-if="isServiceList"></view>
		<view v-if="newsList.length>0">
			<view class="bg-white padding-sm margin-bottom text-df" v-for="(item,index) in newsList"
				>
				<view class="flex align-center ">
					<view class="line-height-x">
						<view class="padding-bottom-sm">用户昵称：{{item.userName}}</view>
						<view class="padding-bottom-sm">手机号：{{item.userPhone}}</view>
						<view class="padding-bottom-sm">状态：{{item.status==0?'未服务':'已服务'}}</view>
						<view class="padding-bottom-sm" v-if="item.status==1">服务人员：{{item.servicePersonnel}}</view>
					</view>
				</view>
				<view class="text-df padding-bottom-xs">报名时间：{{item.createTime}}</view>
				<view class="text-df padding-bottom-xs " v-if="item.status==1">服务时间：{{item.serviceTime}}</view>
				<view class="bg-df padding-xsm radius-xl color-white text-center "@click="addService(item)">{{item.status==0 ? '服务':'服务详情'}}</view>
			</view>
		</view>
		<view style="height: 750rpx;" v-else class="flex-direction-column align-center justify-center col-1">
			<image src="/static/images/noData.png" style="width: 64px; height: 64px;" mode="widthFix"></image>
			<text class="color-gray text-sm margin-top">~没有数据~</text>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log(12312,option)
			if(option.type==1){
				this.isServiceList = true
			}else{
				this.type = 1
			}
			this.activityId = option.activityId
			this.getNews();
			 uni.$on('updateReport', () => {
			      // 在这里更新数据列表
				  this.newsList = []
			      this.getNews();
			    });
		},
		data() {
			return {
				typeArray: ['未服务', '已服务'],
				type: 0,
				loading: true,
				pageNum: 1,
				newsList: [],
				isPopupVisible: false, // 控制弹框显示
				inputValue: '', // 输入框内容
				selectId: null,
				isServiceList:false,//false是服务清单,true是报名清单
				activityId:null
			}
		},
		// 触底加载
		onReachBottom() {
			this.loading && this.getNews()
		},
		methods: {
			typeChange(index) {
				if (this.type != index) {
					this.type = index;
					this.pageNum = 1;
					this.newsList = []
					this.getNews()
				}
			},
			async getNews() {
				uni.showLoading({
					mask: true
				})
				// 0,1  全部。推荐
				const res = await uni.$request.post('/activity/queryActivityDetailInfoList', {
					'pageSize': 10,
					'pageNum': this.pageNum,
					'status': this.type,
					'storeId': uni.getStorageSync('userinfo').storeId,
					'activityId':this.activityId
				});
				uni.hideLoading();
				if (res.code == 200) {
					// 查的是报名清单
					let arr = []
					if(this.isServiceList){
						arr = res.rows.filter(item => item.activityCenter.activityType === 0);
					}else{
						arr = res.rows.filter(item => item.activityCenter.activityType === 1);
					}
					this.newsList = [...this.newsList, ...arr]
					if (this.newsList.length === res.total) {
						this.loading = false
					}
					// this.footPrintlist = res.rows;
				} else {
					uni.showModal({
						title: '提示',
						content: '查询失败',
						showCancel: false
					})
				}
			},
			addService(item){
				uni.navigateTo({
					url: `/pages/my/addService?status=${item.status}&&activityId=${this.activityId}&&userName=${item.userName}&&userPhone=${item.userPhone}&&serviceId=${item.id}`
				});
			},
		}
	}
</script>

<style scoped>
	.select-on {
		border-bottom: 8rpx solid #ff5722;
	}

	.bg-white {
		position: relative;
	}
	.margin-top-xl{
		margin-top: 200px;
	}
	.color-white{
		width: 100px;
	}
	.bg-df{
		margin: auto;
	}
</style>